<template>
  <div class="common-wrap">
    <div class="container">
      <div class="left-tree" :style="{width:width+'px'}">
        <website-tree
          :tree-cus-data="treeData"
          @handleNodeClick="handleNodeClick"
        />
        <div ref="dragLine" class="dragLine" />
      </div>
      <div class="right-table con-margin-l" :style="{width:`calc(100% - ${width+5}px)`}">
        <condition-form
          ref="conditionForm"
          v-model="searchForm"
          :form-data="formData"
          @handleSearch="handleSearch"
        />
        <div class="common-box">
          <div class="con-button-rows">
            <el-button v-hasPermi="['common:provinceCityArea:add']" type="success" @click="handleAdd"><i class="el-icon-plus" /> {{ $t('新增') }}</el-button>
            <el-button v-hasPermi="['common:provinceCityArea:remove']" type="danger" :loading="deleteLoading" :disabled="!multipleSelection.length" @click="handleDelete"><i class="el-icon-delete" /> {{ $t('删除') }}</el-button>
          </div>
          <m-table
            ref="commonTable"
            :data-source="dataSource"
            :loading="tableLoading"
            :page-vo="pageVo"
            :columns="columns"
            @handleSelectionChange="handleSelectionChange"
            @handlePageChange="handlePageChange"
          />
        </div>
      </div>
    </div>
    <!-- <add v-if="addVisible" :visible.sync="addVisible" :init-data="editRow" @handleSuccessSave="getTableList" /> -->
    <!-- 修改 -->
    <!-- <edit v-if="editVisible" :visible.sync="editVisible" :init-data="editRow" @handleSuccessSave="getTableList" /> -->
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import websiteTree from '@/components/websiteTree'
// import add from './addEdit'
// import edit from './addEdit'
import * as api from '@/api/index.js'

// 组件引用
const conditionForm = ref(null)
const commonTable = ref(null)
const dragLine = ref(null)

// 响应式数据
const width = ref(300)
const treeData = ref([])
const loading = ref(false)
const dataSource = ref([])
const tableLoading = ref(false)
const pageVo = reactive({
  total: 0,
  pageSize: 50,
  currentPage: 1
})
const columns = ref([
  {
    type: 'checkbox',
    width: 50,
    fixed: 'left'
  },
  {
    title: '序号',
    type: 'seq',
    width: 60,
    fixed: 'left'
  },
  {
    field: 'areaCode',
    title: '行政编码'
  },
  {
    field: 'provinceName',
    title: '省份名称'
  },
  {
    field: 'cityName',
    title: '城市名称'
  },
  {
    field: 'areaName',
    title: '区/县名称'
  },
  {
    title: '操作',
    field: 'operation',
    slots: { default: 'operation_default' },
    params: [
      {
        title: '修改',
        type: 'success',
        icon: 'el-icon-edit',
        hasPermi: 'common:provinceCityArea:edit',
        click: (row) => {
          handleEdit(row)
        }
      }
    ]
  }
])
const addVisible = ref(false)
const editVisible = ref(false)
const editRow = ref({})
const searchForm = ref({})
const formData = ref([
  {
    type: 'label_input',
    label: '省份名称',
    prop: 'provinceName'
  },
  {
    type: 'label_input',
    label: '城市名称',
    prop: 'cityName'
  },
  {
    type: 'label_input',
    label: '区/县名称',
    prop: 'areaName'
  }
])
const currentRow = ref({})
const deleteLoading = ref(false)
const multipleSelection = ref([])

// Vuex store
const store = useStore()

// 生命周期钩子
onMounted(() => {
  dragControllerDiv()
  getTableList()
  getCountryList()
})

// 方法
const dragControllerDiv = () => {
  // 实现拖拽功能
  const resize = () => {
    // 拖拽逻辑
  }
  resize()
}

const getTableList = async () => {
  const { currentPage, pageSize } = pageVo
  tableLoading.value = true
  try {
    const { rows, total } = await api.common.base.provinceCityArea.areaList({
      ...searchForm.value,
      countryCode: currentRow.value.countryCode,
      pageNum: currentPage,
      pageSize: pageSize
    })
    dataSource.value = rows
    pageVo.total = total
  } finally {
    tableLoading.value = false
  }
}

const handleNodeClick = (val) => {
  currentRow.value = { ...val }
  handleSearch()
}

const handleAdd = () => {
  if (!currentRow.value.countryCode) {
    ElMessage.error('请先选择国家')
    return
  }
  editRow.value = {
    countryCode: currentRow.value.countryCode,
    countryName: currentRow.value.countryName
  }
  store.dispatch('openMiunsDialog', '新增')
  addVisible.value = true
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const handlePageChange = (val) => {
  const { currentPage, pageSize } = val
  pageVo.currentPage = currentPage
  pageVo.pageSize = pageSize
  getTableList()
}

const handleSearch = () => {
  pageVo.currentPage = 1
  getTableList()
}

const handleEdit = (row) => {
  store.dispatch('openMiunsDialog', '修改')
  editRow.value = { ...row }
  editVisible.value = true
}

const handleDelete = () => {
  ElMessageBox.confirm('是否确定删除该数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async () => {
    const ids = multipleSelection.value.map(it => it.id)
    deleteLoading.value = true
    try {
      await api.common.base.provinceCityArea.areaRemove(ids)
      handleSearch()
      deleteLoading.value = false
    } catch {
      deleteLoading.value = false
    }
  }).catch(() => {})
}

const getCountryList = async () => {
  loading.value = true
  try {
    const res = await api.common.base.provinceCityArea.countryList({
      pageSize: 300
    })
    treeData.value = res.rows.map(item => ({
      ...item,
      label: item.countryName
    }))
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
}
.left-tree {
  position: relative;
  float: left;
}
.right-table {
  float: right;
}
.dragLine {
  height: 100%;
  position: absolute;
  right: -5px;
  width: 10px;
  top: 0;
  z-index: 100;
  cursor:col-resize;
}
</style>
